<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的数据 - 河域分割系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">河域分割系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('dashboard') }}">仪表板</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('data.my_data') }}">我的数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('data.upload') }}">上传数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('analysis.time_series_analysis') }}">时间分析</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> {{ current_user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人资料</a></li>
                            <li><a class="dropdown-item" href="#">设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container my-4">
        <div class="row mb-4">
            <div class="col-md-8">
                <h2>我的数据</h2>
                <p class="text-muted">查看和管理您上传的所有数据</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ url_for('data.upload') }}" class="btn btn-primary">
                    <i class="bi bi-cloud-upload"></i> 上传新数据
                </a>
            </div>
        </div>

        <!-- 过滤选项 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form method="get" class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">数据类型</label>
                                <select class="form-select" name="type">
                                    <option value="">全部</option>
                                    <option value="satellite">卫星影像</option>
                                    <option value="shp">SHP文件</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">城市</label>
                                <input type="text" class="form-control" name="city" placeholder="输入城市名称">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">&nbsp;</label>
                                <button type="submit" class="btn btn-secondary w-100">筛选</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据列表 -->
        <div class="row">
            {% if images %}
                {% for image in images %}
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span>
                                {% if image.image_type == 'satellite' %}
                                <i class="bi bi-image text-primary"></i> 卫星影像
                                {% else %}
                                <i class="bi bi-geo-alt text-success"></i> SHP文件
                                {% endif %}
                            </span>
                            <small class="text-muted">{{ image.upload_date.strftime('%Y-%m-%d %H:%M') }}</small>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">{{ image.filename.split('_', 1)[1] }}</h5>
                            <div class="mb-2">
                                {% if image.city %}
                                <span class="badge bg-info">{{ image.city }}</span>
                                {% endif %}
                                {% if image.latitude and image.longitude %}
                                <span class="badge bg-secondary">{{ image.latitude }}, {{ image.longitude }}</span>
                                {% endif %}
                            </div>
                            <div class="d-grid gap-2">
                                <a href="{{ url_for('data.image_detail', image_id=image.id) }}" class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-eye"></i> 查看详情
                                </a>
                                <button class="btn btn-outline-danger btn-sm delete-image" data-image-id="{{ image.id }}">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="col-12">
                    <div class="alert alert-info">
                        <p class="mb-0 text-center">您还没有上传任何数据。 <a href="{{ url_for('data.upload') }}">立即上传</a></p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确定要删除这个数据吗？此操作不可撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>河域分割系统</h5>
                    <p>基于深度学习的河域分割与分析平台</p>
                </div>
                <div class="col-md-3">
                    <h5>链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('index') }}" class="text-white">首页</a></li>
                        <li><a href="{{ url_for('dashboard') }}" class="text-white">仪表板</a></li>
                        <li><a href="{{ url_for('data.my_data') }}" class="text-white">我的数据</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>账户</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">个人资料</a></li>
                        <li><a href="#" class="text-white">设置</a></li>
                        <li><a href="{{ url_for('auth.logout') }}" class="text-white">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <p>&copy; 2023 河域分割系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('.delete-image');
            const confirmDeleteButton = document.getElementById('confirmDelete');
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            let currentImageId = null;

            deleteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    currentImageId = this.getAttribute('data-image-id');
                    deleteModal.show();
                });
            });

            confirmDeleteButton.addEventListener('click', function() {
                if (currentImageId) {
                    fetch(`/data/delete/${currentImageId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            deleteModal.hide();
                            window.location.reload();
                        } else {
                            alert('删除失败: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('删除出错:', error);
                        alert('操作失败，请重试');
                    });
                }
            });
        });
    </script>
</body>
</html> 